<template>
  <div style="0">
    <!-- <span style="color: #409EFF;margin-left: 10px">药品信息</span> -->
    <el-radio-group v-model="chelaxy" style="margin-left:15px;" @change="resetPagination();selectList()">
      <el-radio-button v-if="!(this.$store.getters.hospitalId == 76 || this.$store.getters.hospitalId == 201)" label="胸痛" />
      <el-radio-button label="卒中" />
    </el-radio-group>
    <el-row style="margin-top: 10px;">
      <el-col :span="22" style="font-size: 14px;margin-left: 10px">
        药物类型:
        <el-select v-model="auxiliary" style="width: 20%;" filterable @change="resetPagination();selectList()">
          <el-option
            v-for="item in examination"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <!--  <el-select style="width:20%;" v-model="auxiliary" filterable v-if="fleg">
            <el-option v-for="item in examinations"
                       :value="item.value"
                       :key="item.value"
                       :label="item.label"
            >
            </el-option>
          </el-select>-->
      </el-col>
      <el-col :span="1">
        <el-button style="text-align: right" type="primary" @click="newimpression()">新增</el-button>
      </el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col style="padding: 20px;">
        <el-table
          ref="multipleTable"
          :data="tableData"
          height="650"
          style="width: 100%; margin-top: -30px"
          class="table"
          border
        >
          <!--  <el-table-column
              type="selection"
              width="50"
              header-align="center"
              align="center">
            </el-table-column>-->
          <el-table-column
            label="药物类型"
            min-width="200"
            prop="medicineType"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="medicineName"
            label="通用名称"
            min-width="200"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="medicineUnit"
            label="单位"
            min-width="100"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="操作"
            min-width="150"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="details(scope.row)">详情</el-button>
              <el-button
                type="text"
                style="color: red;margin-left: 30px"
                @click="handleDelete(scope.$index, scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-dialog
      v-el-drag-dialog
      title="新增用药"
      :visible.sync="newimpressiongase"
      width="50%"
      center
      style="margin-top: -70px;margin-left: 140px"
    >
      <el-form
        ref="send"
        :model="send"
        :rules="addbaserules"
        class="elform"
        style="width: 100%;border-bottom: 1px solid #F0F0EE;border-top: 1px solid #F0F0EE;height: 500px;overflow: auto"
      >
        <el-row style="margin-left: 10px;">
          <el-col :span="10">
            <el-form-item label="药物类型:" prop="projectName" style="margin-top: 10px;">
              <el-select v-model="send.projectName" style="width: 70%" filterable placeholder="请选择">
                <el-option
                  v-for="item in examinations"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <div class="grid-content bg-purple-dark" />
          </el-col>
          <el-col :span="5" style="text-align: right">
            <el-form-item label="" prop="impressionform" style="margin-top: 2px;">
              <el-button
                type="primary"
                size="small"
                style="margin-top: 10px;margin-left: 20px"
                @click="addtion('send')"
              >新增用药
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider />
        <p v-for="(item,key) in tableDete" style="margin-left: 10px;font-size: 15px;margin-top: 10px">
          <!--列表-->
          <el-row>
            <el-col :span="10">
              <el-form-item label="通用名称:" prop="genericname">
                <el-input v-model="item.medicineName" style="width:68%; margin-left: 5px" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="单位:" prop="units">
                <el-input v-model="item.medicineUnit" style="width:30%; margin-left:5px" />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: right">
              <el-form-item>
                <el-button type="text" style="color: red;font-size: 16px;" @click="remove(item,key)">删除
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="width: 60px;height: 30px;line-height: 20px;padding: 0px 5px;margin-left: 0px"
          @click="cancle"
        >取消</el-button>
        <el-button
          type="primary"
          style="width: 60px;height: 30px;line-height: 20px;padding: 0px 5px;margin-left: 100px"
          @click="addTypeData('send')"
        >保存</el-button>
      </span>
    </el-dialog>
    <!--编辑用药-->
    <el-dialog
      v-el-drag-dialog
      title="编辑用药"
      :visible.sync="upimpressiongase"
      width="40%"
      center
      style="margin-top: -70px;margin-left: 140px"
    >
      <el-form
        ref="upsend"
        :model="upsend"
        :rules="upbaserules"
        class="elform"
        style="width: 100%;border-bottom: 1px solid #F0F0EE;border-top: 1px solid #F0F0EE;height: 240px;overflow: auto"
      >
        <el-row style="margin-left: 10px;">
          <el-col :span="10">
            <el-form-item label="药物类型:" prop="projectName" style="margin-top: 10px;">
              <el-select v-model="upsend.projectName" style="width: 70%" disabled>
                <el-option
                  v-for="item in examinations"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <div class="grid-content bg-purple-dark" />
          </el-col>
          <!--   <el-col :span="5" style="text-align: right">
               <el-form-item label="" prop="impressionform" style="margin-top: 2px;">
                 <el-button @click="updtion('send')" type="primary" size="small"
                            style="margin-top: 10px;margin-left: 20px">添加印象
                 </el-button>
               </el-form-item>
             </el-col>-->
        </el-row>
        <el-divider />
        <p v-for="(item,key) in tableDoto" style="margin-left: 10px;font-size: 15px;margin-top: 10px">
          <!--列表-->
          <el-row>
            <el-col :span="10">
              <el-form-item label="通用名称:" prop="genericname">
                <el-input v-model="item.medicineName" style="width:68%; margin-left: 5px" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="单位:" prop="units">
                <el-input v-model="item.medicineUnit" style="width:30%; margin-left:5px" />
              </el-form-item>
            </el-col>
            <!--  <el-col :span="4" style="text-align: right">
                <el-form-item>
                  <el-button type="text" @click="upremove(item,key)" style="color: red;font-size: 16px;">删除
                  </el-button>
                </el-form-item>
              </el-col>-->
          </el-row>
        </p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="width: 60px;height: 30px;line-height: 20px;padding: 0px 5px;margin-left: 0px"
          @click="upcancle"
        >取消</el-button>
        <el-button
          type="primary"
          style="width: 60px;height: 30px;line-height: 20px;padding: 0px 5px;margin-left: 100px"
          @click="upTypeData('upsend')"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { saveList, selectList, updateList, deleteList } from '@/api/back-management/Drug_information'
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  name: 'DrugInformation',
  directives: { elDragDialog },
  data() {
    return {
      /* 表格*/
      tableData: [
        /* {
                         Drugtype: '抗血小板药',
                         name: '阿司匹林肠溶缓释片',
                         unit: 'mg',
                     },*/
      ],
      /* 表格分页参数*/
      currentPage: 1,
      pagesize: 10,
      pageTotal: 0,
      /* 表格高度*/
      tableHeight: '',
      /* 胸痛卒中单选按钮*/
      chelaxy: (this.$store.getters.hospitalId == '76' || this.$store.getters.hospitalId == '201') ? '卒中' : '胸痛',
      auxiliary: '',
      examination: [
        {
          value: '',
          label: '全部'
        }, {
          value: '抗血小板药',
          label: '抗血小板药'
        }, {
          value: 'ACEI/ARB',
          label: 'ACEI/ARB'
        }, {
          value: '抗凝药',
          label: '抗凝药'
        }, {
          value: '他汀药',
          label: '他汀药'
        }, {
          value: 'β受体阻滞剂',
          label: 'β受体阻滞剂'
        }, {
          value: '急救常用',
          label: '急救常用'
        }, {
          value: 'CCB',
          label: 'CCB'
        }, {
          value: 'β-B',
          label: 'β-B'
        }, {
          value: 'α-B',
          label: 'α-B'
        }, {
          value: '利尿剂',
          label: '利尿剂'
        }, {
          value: '其他降压药',
          label: '其他降压药'
        }, {
          value: '双胍、α-糖苷酶、噻唑烷',
          label: '双胍、α-糖苷酶、噻唑烷'
        }, {
          value: '促泌剂',
          label: '促泌剂'
        }, {
          value: '新型降糖药',
          label: '新型降糖药'
        }, {
          value: '胰岛素',
          label: '胰岛素'
        }, {
          value: '降脂药',
          label: '降脂药'
        }, {
          value: '降尿酸药',
          label: '降尿酸药'
        }, {
          value: '治疗骨质疏松用药',
          label: '治疗骨质疏松用药'
        }
      ],
      examinations: [
        {
          value: '抗血小板药',
          label: '抗血小板药'
        }, {
          value: 'ACEI/ARB',
          label: 'ACEI/ARB'
        }, {
          value: '抗凝药',
          label: '抗凝药'
        }, {
          value: '他汀药',
          label: '他汀药'
        }, {
          value: 'β受体阻滞剂',
          label: 'β受体阻滞剂'
        }, {
          value: '急救常用',
          label: '急救常用'
        }, {
          value: 'CCB',
          label: 'CCB'
        }, {
          value: 'β-B',
          label: 'β-B'
        }, {
          value: 'α-B',
          label: 'α-B'
        }, {
          value: '利尿剂',
          label: '利尿剂'
        }, {
          value: '其他降压药',
          label: '其他降压药'
        }, {
          value: '双胍、α-糖苷酶、噻唑烷',
          label: '双胍、α-糖苷酶、噻唑烷'
        }, {
          value: '促泌剂',
          label: '促泌剂'
        }, {
          value: '新型降糖药',
          label: '新型降糖药'
        }, {
          value: '胰岛素',
          label: '胰岛素'
        }, {
          value: '降脂药',
          label: '降脂药'
        }, {
          value: '降尿酸药',
          label: '降尿酸药'
        }, {
          value: '治疗骨质疏松用药',
          label: '治疗骨质疏松用药'
        }
      ],
      /* 新增用药*/
      newimpressiongase: false,
      send: {
        projectName: '抗血小板药'
      },
      addbaserules: {},
      /* 添加*/
      tableDete: [],
      nerrey: [],
      /* 编辑用药*/
      upimpressiongase: false,
      upsend: {
        projectName: ''
      },
      upbaserules: {},
      tableDoto: [],
      narray: [],
      userId: this.$store.getters.userId,
      hospitalId: this.$store.getters.hospitalId,
      apiToken: this.$store.getters.apiToken
    }
  },
  created() {
    this.selectList()
  },
  methods: {
    /* 添加印象*/
    addtion() {
      const obj = {}
      obj.medicineName = ''
      obj.medicineUnit = ''
      this.tableDete.push(obj)
    },
    /* 新增导入*/
    newimpression() {
      this.newimpressiongase = true
    },
    /* 取消*/
    cancle() {
      this.newimpressiongase = false
    },
    /* 新增确认*/
    addTypeData() {
      for (let i = 0; i < this.tableDete.length; i++) {
        this.tableDete[i].greenType = this.chelaxy
        this.tableDete[i].medicineType = this.send.projectName
        this.tableDete[i].medicineDosage = ''
        this.tableDete[i].userId = this.userId
        this.tableDete[i].hospitalId = this.hospitalId
        this.tableDete[i].id = ''
      }
      console.log('12311313', this.tableDete)
      saveList(this.tableDete).then(res => {
        if (res.code === 9999) {
          this.$message({
            type: 'error',
            message: '新增失败!'
          })
        } else {
          this.$message({
            type: 'success',
            message: '新增成功!'
          })
          this.newimpressiongase = false
          this.tableDete = []
          this.selectList()
        }
      })
    },
    /* 新增弹出框删除指标*/
    remove(data, val) {
      this.tableDete.splice(val, 1)
    },
    /* 详情*/
    details(row) {
      console.log(row)
      this.upsend.projectName = row.medicineType
      this.tableDoto = []
      this.tableDoto.push(row)
      this.upimpressiongase = true
    },
    /*    详情增加印象
                updtion() {
                    let obj = {};
                    obj.medicineName = '';
                    obj.medicineUnit = '';
                    this.tableDoto.push(obj);
                },*/
    upcancle() {
      this.upimpressiongase = false
    },
    upTypeData() {
      const obj = {}
      obj.id = this.tableDoto[0].id
      obj.userId = this.tableDoto[0].userId
      obj.hospitalId = this.tableDoto[0].hospitalId
      obj.medicineType = this.tableDoto[0].medicineType
      obj.medicineName = this.tableDoto[0].medicineName
      obj.medicineUnit = this.tableDoto[0].medicineUnit
      obj.medicineDosage = this.tableDoto[0].medicineDosage
      obj.greenType = this.tableDoto[0].greenType
      console.log(obj)
      updateList(obj).then(res => {
        if (res.code === 9999) {
          this.$message({
            type: 'error',
            message: '修改失败!'
          })
        } else {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.upimpressiongase = false
          this.tableDoto = []
          this.selectList()
        }
      })
    },
    /* upremove(data, val) {
                 if (this.tableDoto.length === 1) {
                     this.$message({
                         message: '不可删除',
                         type: 'error'
                     });
                     return
                 }
                 this.tableDoto.splice(val, 1);
             },*/
    /* 删除*/
    handleDelete(index, row) {
      this.$confirm('确认删除?')
        .then(_ => {
          deleteList({ id: row.id }).then(res => {
            if (res.code === 9999) {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            } else {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.resetPagination()
              this.selectList()
            }
          })
        })
        .catch(_ => {})
    },
    /* 查询表格*/
    selectList() {
      const data = {
        pageNum: this.currentPage,
        pageSize: this.pagesize,
        apiToken: this.apiToken,
        greenType: this.chelaxy,
        medicineType: this.auxiliary
      }
      selectList(data).then(res => {
        this.tableData = res.data.list
        this.pageTotal = res.data.total
      })
    },
    resetPagination() {
      this.currentPage = 1
      // this.pagesize = 10
      this.pageTotal = 0
    },
    // 分页尺寸改变
    handleSizeChange(size) {
      this.pagesize = size
      this.selectList()
    },
    // 分页换页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.selectList()
    },
    handleSelectionChange() {

    }
  }

}
</script>

<style scoped>
  .table /deep/ th:first-child .cell, .el-table--border td:first-child .cell {
    padding-left: 7px;
  }

  .el-col {
    border: 1px solid transparent;
  }

  .elform /deep/ .el-form-item {
    margin-bottom: 0px;
  }
</style>
